<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>音乐榜单</title>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>

    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/VarGloba.js"></script>
    <style>

    </style>
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<section class="py-6 text-center container" style="background-image: url(https://img1.baidu.com/it/u=472493569,3582573794&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);width: 100%;height:300px;margin-top: 10px">
    <div class="row py-lg-5">
        <div class="col-lg-12 col-md-8 mx-auto">
            <h1 class="fw-light">花火音乐</h1>
            <p class="lead text-muted">以纯净之声，交世界之友</p>
            <p class="lead text-muted">以空明之心，聆听宇宙的声音</p>
        </div>
        <div class="col-lg-12">
            <div style="width: 40%;height: 45px;border-radius: 80px;margin-left: 30%;margin-top: 10px">
                <div class="input-group">
                    <input type="text" class="form-control" id="musicName" placeholder="输入音乐名">
                    <span class="input-group-btn">
                        <button class="btn btn-default" onclick="musicNameSearch()" type="button">搜索</button>
                    </span>
                </div><!-- /input-group -->
            </div>

        </div><!-- /.col-lg-6 -->
    </div>
</section>
<div class="big clearfix">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
				<span class="nonostyle" data-toggle="collapse" data-parent="#accordion"
                      href="#collapseOne">
					热门榜单
				</span>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <a onclick="getMusicByType('网络流行榜')" href="javascript:void(0)">网络流行榜</a>
                    <a onclick="getMusicByType('电影音乐榜')" href="javascript:void(0)">电影音乐榜</a>
                    <a onclick="getMusicByType('抖音传唱榜')" href="javascript:void(0)">抖音传唱榜</a>
                    <a onclick="getMusicByType('网易热门榜')" href="javascript:void(0)">网易热门榜</a>
                    <a onclick="getMusicByType('酷狗TOP榜')"  href="javascript:void(0)">酷狗TOP榜</a>
                    <a onclick="getMusicByType('DJ热歌榜')"   href="javascript:void(0)">DJ热歌榜</a>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h4 class="panel-title">
				<span class="nonostyle" data-toggle="collapse" data-parent="#accordion"
                      href="#collapseTwo">
					外语榜单
                    </span>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <a onclick="getMusicByType('欧美音乐榜')" href="javascript:void(0)">欧美音乐榜</a>
                    <a onclick="getMusicByType('韩语音乐榜')" href="javascript:void(0)">韩语音乐榜</a>
                    <a onclick="getMusicByType('日语音乐榜')" href="javascript:void(0)">日语音乐榜</a>
                </div>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <span style="cursor: pointer" class="nonostyle" data-toggle="collapse" data-parent="#accordion"
                          href="#collapseThree">
                        歌手排行榜
                        </span>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <a onclick="getMusicByType('刘德华')" href="javascript:void(0)">刘德华</a>
                    <a onclick="getMusicByType('张学友')" href="javascript:void(0)">张学友</a>
                    <a onclick="getMusicByType('周华健')" href="javascript:void(0)">周华健</a>
                    <a onclick="getMusicByType('薛之谦')" href="javascript:void(0)">薛之谦</a>
                    <a onclick="getMusicByType('周杰伦')" href="javascript:void(0)">周杰伦</a>
                    <a onclick="getMusicByType('陈奕迅')" href="javascript:void(0)">陈奕迅</a>
                    <a onclick="getMusicByType('周传雄')" href="javascript:void(0)">周传雄</a>
                    <a onclick="getMusicByType('林俊杰')" href="javascript:void(0)">林俊杰</a>
                    <a onclick="getMusicByType('毛不易')" href="javascript:void(0)">毛不易</a>
                    <a onclick="getMusicByType('张杰')"   href="javascript:void(0)">张杰</a>
                </div>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h4 class="panel-title">
				<span class="nonostyle" data-toggle="collapse" data-parent="#accordion"
                      href="#collapseFour">
					怀旧金曲榜
				</span>
                </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse">
                <div class="panel-body">
                    <a onclick="getMusicByType('古装金曲榜')" href="javascript:void(0)">古装金曲榜</a>
                    <a onclick="getMusicByType('电影主题榜')" href="javascript:void(0)">电影主题榜</a>
                    <a onclick="getMusicByType('爱国热血榜')" href="javascript:void(0)">爱国热血榜</a>
                    <a onclick="getMusicByType('80热歌榜')"   href="javascript:void(0)">80热歌榜  </a>
                    <a onclick="getMusicByType('90热歌榜')"   href="javascript:void(0)">90热歌榜  </a>
                    <a onclick="getMusicByType('粤语金曲榜')" href="javascript:void(0)">粤语金曲榜</a>
                </div>
            </div>
        </div>
    </div>

    <div>
    <div class="big4 gedan" style="width: 1000px; float: right; overflow: auto;">
        <div class="xiaodaohang">
            <div class="clearfix" style="height: 500px">
                <table id="contentBody" style="width: 1000px;margin: auto; overflow: auto;">
                    <thead>
                    <tr style="border-bottom: 1px solid #919191;line-height: 35px;">
                        <th style="text-align: left;font-size: 15px">歌名</th>
                        <th style="text-align: left;font-size: 15px">歌手</th>
                        <th style="text-align: left;font-size: 15px">发布日期</th>
                        <th style="text-align: left;font-size: 15px">播放</th>
                    </tr>
                    </thead>
                    <tbody id="content-music" style="font-size: 16px">
                    <tr>
                        <th style="text-align: left;font-size: 15px">序号</th>
                        <th style="text-align: left;font-size: 15px">歌名</th>
                        <th style="text-align: left;font-size: 15px">歌手</th>
                        <th style="text-align: left;font-size: 15px"><a class="glyphicon glyphicon-play" href="#"></a></th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>

</div>

</body>
<script>
    getMusicByType('网络流行榜');
    function getMusicByType(type) {
        $('#content-music').remove();
        var content_div = '<tbody id="content-music" style="font-size: 16px"></tbody>';
        $('#contentBody').append(content_div);
        var MusicList = {
            "music_type":type
        };
        // var MyMusinBg = '<div class="big4 gedan" style="width: 1000px; float: right; overflow: auto;">\n' +
        //     '    <div class="xiaodaohang">\n' +
        //     '        <div class="clearfix" style="height: 800px">\n' +
        //     '            <table style="width: 1000px;margin: auto; overflow: auto;">\n' +
        //     '                <thead>\n' +
        //     '                <tr style="border-bottom: 1px solid #919191;line-height: 35px;">\n' +
        //     '                    <th style="text-align: center;font-size: 15px">歌名</th>\n' +
        //     '                    <th style="text-align: center;font-size: 15px">歌手</th>\n' +
        //     '                    <th style="text-align: center;font-size: 15px">发布日期</th>\n' +
        //     '                    <th style="text-align: center;font-size: 15px">播放</th>\n' +
        //     '                </tr>\n' +
        //     '                </thead>\n' +
        //     '                <tbody style="font-size: 16px" id="tbody">\n' +
        //     '                </tbody>\n' +
        //     '            </table>\n' +
        //     '        </div>\n' +
        //     '    </div>\n' +
        //     '</div>';
        // $('#content-music').append(MyMusinBg);
        $.ajax({
            type:"post",
            url:BaseURL+"music/getMusicListByType",
            dataType:"json",
            data:JSON.stringify(MusicList),
            contentType : 'application/json',
            success:function (data) {
                console.log(data)
                var DataList = data.data;
                for (var i = 0; i < DataList.length; i++) {
                    var tr = $('<tr>\n' +
                        '    <th style="text-align: left;font-size: 15px">' + DataList[i]["music_name"] + '</th>+\n' +
                        '    <th style="text-align: left;font-size: 15px">' + DataList[i]["music_author"] + '</th>+\n' +
                        '    <th style="text-align: left;font-size: 15px">' + DataList[i]["music_creatdate"] + '</th>+\n' +
                        '    <th style="text-align: left;font-size: 15px"><a class="glyphicon glyphicon-play" href="/musicruning/' + DataList[i]["music_id"] + '"></a></th>+\n' +
                        '</tr>+');
                    $('#content-music').append(tr);
                }
            }
    })
    }
    function musicNameSearch() {
        var musicName = $('#musicName').val();
        if (musicName == undefined||musicName == ""){
            alert("请输入查询条件")
        } else {
            var music = {
                "music_name":musicName
            };
            $.ajax({
                type:"post",
                url:BaseURL+"music/musicSearch",
                dataType:"json",
                data:JSON.stringify(music),
                contentType : 'application/json',
                success:function (data){
                    console.log(data);
                    var musiclist = data.data;
                    if (musiclist.length == 0){
                        alert("没有查询到相关数据")
                    } else {
                        $('#content-music').remove();
                        var content_div = '<tbody id="content-music" style="font-size: 16px"></tbody>';
                        $('#contentBody').append(content_div);
                        // var MyMusinBg = '<div class="big4 gedan" style="width: 1000px; float: right; overflow: auto;">\n' +
                        //     '    <div class="xiaodaohang">\n' +
                        //     '        <div class="clearfix" style="height: 800px">\n' +
                        //     '            <table style="width: 1000px;margin: auto; overflow: auto;">\n' +
                        //     '                <thead>\n' +
                        //     '                <tr style="border-bottom: 1px solid #919191;line-height: 35px;">\n' +
                        //     '                    <th style="text-align: center;font-size: 15px">歌名</th>\n' +
                        //     '                    <th style="text-align: center;font-size: 15px">歌手</th>\n' +
                        //     '                    <th style="text-align: center;font-size: 15px">发布日期</th>\n' +
                        //     '                    <th style="text-align: center;font-size: 15px">播放</th>\n' +
                        //     '                </tr>\n' +
                        //     '                </thead>\n' +
                        //     '                <tbody style="font-size: 16px" id="tbody">\n' +
                        //
                        //     '                </tbody>\n' +
                        //     '            </table>\n' +
                        //     '        </div>\n' +
                        //     '    </div>\n' +
                        //     '</div>';
                        // $('#content-music').append(MyMusinBg);
                        for (var i=0;i<musiclist.length;i++){
                            var tr = $('<tr>\n' +
                                '    <th style="text-align: left;font-size: 15px">' + musiclist[i]["music_name"] + '</th>+\n' +
                                '    <th style="text-align: left;font-size: 15px">' + musiclist[i]["music_author"] + '</th>+\n' +
                                '    <th style="text-align: left;font-size: 15px">' + musiclist[i]["music_creatdate"] + '</th>+\n' +
                                '    <th style="text-align: left;font-size: 15px"><a class="glyphicon glyphicon-play" href="/musicruning/' + musiclist[i]["music_id"] + '"></a></th>+\n' +
                                '</tr>+');
                            $('#content-music').append(tr);
                        }
                    }
                }
            })
        }
    }
</script>
</html>